<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-size="queryInfo.pagesize"
      :page-sizes="[1, 2, 5, 10]"
      layout="total, sizes, prev, pager, next ,jumper"
      :total="totalNum"
    >
      <!-- 
// @size-change=“handleSizeChange” 绑定的是 pagesize 改变的事件
// @current-change=“handleCurrentChange” 绑定的是 页码值 改变的事件
//:current-page=“queryinfo.pagenum” 代表当前显示第几页 这里动态的获取 data 里的 条数
//:page-size=“queryinfo.pagesize” 代表当前每页显示多少条数据 这里动态的获取 data 里的 页数
//:page-sizes="[1, 2, 5, 10]" 这里的数组 提供 pageSize 的切换
//layout=“total, sizes, prev, pager, next ,jumper” 每个值代表页面上展示的功能组件 布局结构
// :total=“total” 总共显示的数据 动态获取到data的总条数 
-->
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "Pagination",
  props: {
    pageNo: { type: Number, default: 0 },
    pageSize: { type: Number, default: 0 },
    totalNum: { type: Number, default: 0 },
    continues: { type: Number, default: 0 },
  },
  data() {
    return {
      // 总条数
      total: 0,
      //参数
      queryInfo: {
        query: "",
        // 当前页数
        pagenum: 1,
        // 显示一页多少条数据
        pagesize: 1,
      },
    };
  },
  mounted() {},
  methods: {
    //监听 pagesize 改变的事件
    handleSizeChange(newsize) {
      //这里conso 选中第几页 最新的值
      //最新的条数（newsize）赋值给 动态的 pagesie
      this.queryInfo.pagesize = newsize;
      //获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求方法
      this.userlistinfo(newPage);
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      //把最新的页码（newPage）赋值给 动态的 pagenum
      this.queryInfo.pagenum = newPage;
      //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求方法
      this.userlistinfo(newPage);
    },

    userlistinfo(newPage) {
      this.$emit("getPageNo", newPage);
    },
  },
};
</script>
<style lang='less' scoped>
.sui-pagination {
  margin: 18px 0;
  ul {
    margin-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
    width: 490px;
    float: left;
    li {
      line-height: 18px;
      display: inline-block;
      a {
        position: relative;
        float: left;
        line-height: 18px;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #e0e9ee;
        margin-left: -1px;
        font-size: 14px;
        padding: 9px 18px;
        color: #333;
      }
      &.active {
        a {
          background-color: #fff;
          color: #e1251b;
          border-color: #fff;
          cursor: default;
        }
      }
      &.prev {
        a {
          background-color: #fafafa;
        }
      }
      &.disabled {
        a {
          color: #999;
          cursor: default;
        }
      }
      &.dotted {
        span {
          margin-left: -1px;
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          font-size: 14px;
          border: 0;
          padding: 9px 18px;
          color: #333;
        }
      }
      &.next {
        a {
          background-color: #fafafa;
        }
      }
    }
  }
  div {
    display: block;
    color: #333;
    font-size: 14px;
    float: right;
    width: 241px;
    padding-top: 10px;
  }
}
</style>

